<!--参数:  length 长度，number 0-->
      <!--height 高度，number 2-->
      <!--del 是否删除图表 Boolean false-->
      <!--clickDel 删除方法-->
<template>
  <div class="zx-work-container">
    <p >{{title}}</p>
    <p class="work-intro-title">作品介绍</p>
    <zx-Img-preview :imgList="imgList"></zx-Img-preview>
    <p>
      <van-tag><a href="http://www.baidu.com" slot="default">作品链接1</a></van-tag>
      <van-tag><a href="http://www.baidu.com" slot="default">作品链接2</a></van-tag>
    </p>
    <img v-if="del" @click="handleClick" class="del-icon" src="../../static/img/person.jpg" alt="">
  </div>
</template>
<script>
  import zxImgPreview from './zx-img-preview';
  import {Tag} from 'vant';

  export default {
    name: 'zx-manage-work',
    components: {
      vanTag: Tag,
      zxImgPreview
    },
    props: {
      del: {
        type: Boolean,
        default() {
          return false;
        }
      },
      title: {
        type: String,
        default() {
         return '熟练度';
        }
      },
    },
    data() {
      return {
          imgList: [
            'https://img.yzcdn.cn/2.jpg',
            'https://img.yzcdn.cn/2.jpg'
          ]
      };
    },
    watch: {},
    computed: {},
    mounted() {
    },
    methods: {
      handleClick() {
          this.$emit('clickDel');
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  @import url('../../static/style/var');

  .zx-work-container {
    padding: 8px 10px;
    background-color: #ffffff;
    position: relative;
    .work-intro-title {
      font-size: @weak-tips-size;
      color: @weak-tips-color;
    }
    p {
      font-size: @title-font-size;
      color: @font-dault-color;
      padding: 5px 0;
    }
    .del-icon {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    a {
      color: @weak-tips-color;
    }
  }
</style>
